<template>
  <div class="login-container">
    <!-- 上半部蓝色区域 -->
    <div class="top-color-layer">
      <div class="header-content">
        <h1 class="platform-title">一体化慢病管理平台</h1>
      </div>
    </div>

    <!-- 下半部白色区域 -->
    <div class="bottom-content">
      <div class="login-form-wrapper">
        <div class="login-form">
          <h2 class="form-title">登录</h2>
          <el-form :model="form" label-width="80px" @submit.prevent="handleLogin">
            <!-- 用户名 -->
            <el-form-item label="用户名">
              <el-input v-model="form.username" placeholder="请输入用户名" class="custom-input" clearable />
            </el-form-item>

            <!-- 密码 -->
            <el-form-item label="密码">
              <el-input v-model="form.password" placeholder="请输入密码" show-password class="custom-input" clearable />
            </el-form-item>

            <!-- 验证码 -->
            <el-form-item label="验证码">
              <div class="captcha-container">
                <el-input v-model="form.captcha" placeholder="输入验证码" class="captcha-input" clearable />
                <div class="captcha-box" @click="refreshCaptcha">
                  <canvas ref="canvas" :width="width" :height="height"></canvas>
                </div>
              </div>
            </el-form-item>

            <!-- 隐私协议 -->
            <!-- <el-form-item>
              <el-checkbox v-model="form.agree">同意《隐私协议》</el-checkbox>
            </el-form-item> -->

            <!-- 登录按钮 -->
            <el-form-item>
              <el-button type="primary" class="login-btn" native-type="submit">
                登录
              </el-button>
            </el-form-item>

            <!-- 辅助功能 -->
            <!-- <div class="form-options">
              <el-checkbox v-model="form.remember">记住我</el-checkbox>
              <el-link type="primary" :underline="false">忘记密码?</el-link>
            </div> -->
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
const apiUrl = import.meta.env.VITE_APP_API_URL;
const store = useCounterStore();
const router = useRouter();


// 表单数据
const form = reactive({
  username: '',
  password: '',
  captcha: '',
  remember: false,
  agree: false
})

// 验证码相关
const width = 120
const height = 40
const canvas = ref<HTMLCanvasElement>()
const captchaText = ref('')

// 生成验证码
const generateCaptcha = () => {
  const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
  let text = ''
  for (let i = 0; i < 4; i++) {
    text += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  captchaText.value = text
  return text
}

// 绘制验证码
const drawCaptcha = () => {
  if (!canvas.value) return
  const ctx = canvas.value.getContext('2d')
  if (!ctx) return

  ctx.clearRect(0, 0, width, height)

  // 绘制背景
  ctx.fillStyle = '#f8f8f8'
  ctx.fillRect(0, 0, width, height)

  // 绘制文字
  ctx.font = 'bold 24px Arial'
  ctx.textBaseline = 'middle'
  ctx.textAlign = 'center'

  for (let i = 0; i < captchaText.value.length; i++) {
    ctx.save()
    ctx.translate(30 * i + 15, 20)
    ctx.rotate((Math.random() - 0.5) * 0.4)
    ctx.fillStyle = `hsl(${Math.random() * 360}, 60%, 50%)`
    ctx.fillText(captchaText.value[i], 0, 0)
    ctx.restore()
  }

  // 绘制干扰线
  for (let i = 0; i < 3; i++) {
    ctx.beginPath()
    ctx.moveTo(Math.random() * width, Math.random() * height)
    ctx.lineTo(Math.random() * width, Math.random() * height)
    ctx.strokeStyle = `rgba(150,150,150,${Math.random()})`
    ctx.lineWidth = 1
    ctx.stroke()
  }
}

// 刷新验证码
const refreshCaptcha = () => {
  generateCaptcha()
  drawCaptcha()
}

// 初始化
onMounted(() => {
  generateCaptcha()
  drawCaptcha()
})

// 登录处理
const handleLogin = () => {
  // if (!form.agree) {
  //   ElMessage.warning('请同意隐私协议')
  //   return
  // }
  if (form.username == "") {
    ElMessage.error("用户名不能为空");
    return;
  }
  if (form.password == "") {
    ElMessage.error("密码不能为空")
    return;
  }
  if (form.captcha.toLowerCase() !== captchaText.value.toLowerCase()) {
    ElMessage.error('验证码错误')
    refreshCaptcha()
    return
  }

  // 实际登录逻辑...
  axios
    .get(apiUrl + '/T5/Message/Login', {
      params: {
        UserName: form.username,
        Password: form.password
      }
    })
    .then((res) => {
      if (res.data.code == 202) {
        ElMessage.success(res.data.msg);
        store.ccstore.nickName = res.data.data.nickName;
        store.ccstore.userId = res.data.data.userId;
        store.ccstore.userName = res.data.data.userName;
        store.ccstore.depId = res.data.data.depId;
        store.ccstore.level = res.data.data.level;
        store.ccstore.token = res.data.token;
        localStorage.setItem("token", JSON.stringify(res.data.token))
        console.log(store.ccstore);



        router.push('/WorkTower2');
      } else {
        ElMessage.error(res.data.msg);
      }
    });
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  position: relative;
}

/* 顶部蓝色区域 */
.top-color-layer {
  height: 50vh;
  background: #1a2b5a;
  padding: 20px 40px;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.platform-title {
  color: white;
  font-size: 50px;
  letter-spacing: 2px;
  margin-top: 150px;
  /* 新增下移间距 */
  transform: translateY(20px);
  /* 新增位移微调 */
}

.register-btn {
  color: white !important;
  font-size: 16px;
}

/* 底部白色区域 */
.bottom-content {
  height: 50vh;
  position: relative;
}

.login-form-wrapper {
  position: absolute;
  top: -200px;
  /* 上移20px */
  right: 10%;
  width: 420px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  padding: 40px;
}

.form-title {
  color: #1a2b5a;
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
  position: relative;
}

.form-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: #1a2b5a;
  margin: 15px auto 0;
}

/* 输入框样式 */
.custom-input {
  width: 100%;
}

:deep(.el-input__wrapper) {
  border: 1px solid #333 !important;
  /* 添加黑色边框 */
  background: #fff;
  /* 背景改为纯白增强对比 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 添加细微阴影 */
}

:deep(.el-input__wrapper.is-focus),
:deep(.el-input__wrapper:hover) {
  border-color: #000 !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important;
}


/* 验证码区域 */
.captcha-container {
  display: flex;
  gap: 10px;
}

.captcha-input {
  flex: 1;
}

.captcha-box {
  width: 120px;
  height: 40px;
  background: #f8f8f8;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.captcha-box:hover {
  transform: translateY(-2px);
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  height: 45px;
  font-size: 16px;
  background: linear-gradient(135deg, #1a2b5a, #2d3f6e);
  border: none;
  border-radius: 8px;
  transition: all 0.3s;
}

.login-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* 底部选项 */
.form-options {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

/* 响应式 */
@media (max-width: 768px) {
  .login-form-wrapper {
    width: 90%;
    right: 5%;
    padding: 30px;
    top: -80px;
  }

  .platform-title {
    font-size: 22px;
  }

  .register-btn {
    font-size: 14px;
  }
}
</style>